About Cosense
Help
Log in
mrsekut-p
d
y
n
a
m
i
c
i
m
p
o
r
t
l
a
z
y
l
o
a
d
i
n
g
す
る
初
期
表
示
時
に
不
要
な
も
の
は
最
初
か
ら
読
み
込
ま
ず
に
、
b
u
t
t
o
n
押
し
た
時
な
ど
必
要
に
な
っ
た
タ
イ
ミ
ン
グ
で
初
め
て
そ
の
部
分
の
c
h
u
n
k
が
f
e
t
c
h
さ
れ
る
使
う
n
e
x
t
/
d
y
n
a
m
i
c
i
m
p
o
r
t
(
)
D
e
d
i
c
a
t
e
d
W
o
r
k
e
r
別
ス
レ
ッ
ド
で
D
y
n
a
m
i
c
i
m
p
o
r
t
s
す
る
r
e
f
W
e
b
p
a
c
k
h
t
t
p
s
:
/
/
w
e
b
p
a
c
k
.
j
s
.
o
r
g
/
g
u
i
d
e
s
/
c
o
d
e
-
s
p
l
i
t
t
i
n
g
/
#
d
y
n
a
m
i
c
-
i
m
p
o
r
t
s
R
e
a
c
t
.
l
a
z
y
E
C
M
A
S
c
r
i
p
t
に
も
あ
る
h
t
t
p
s
:
/
/
g
i
t
h
u
b
.
c
o
m
/
t
c
3
9
/
p
r
o
p
o
s
a
l
-
d
y
n
a
m
i
c
-
i
m
p
o
r
t
h
t
t
p
s
:
/
/
n
u
m
b
8
6
-
t
e
c
h
.
h
a
t
e
n
a
b
l
o
g
.
c
o
m
/
e
n
t
r
y
/
2
0
2
0
/
0
1
/
0
4
/
1
3
1
6
2
6
>
#
W
I
P
デ
メ
リ
ッ
ト
h
t
t
p
s
:
/
/
w
w
w
.
q
u
o
r
a
.
c
o
m
/
W
h
a
t
-
a
r
e
-
t
h
e
-
c
o
n
s
-
o
f
-
d
y
n
a
m
i
c
-
i
m
p
o
r
t
s
-
a
-
k
-
a
-
c
o
d
e
-
s
p
l
i
t
t
i
n
g
-
J
a
v
a
S
c
r
i
p
t
-
f
i
l
e
s
h
t
t
p
s
:
/
/
g
i
t
h
u
b
.
c
o
m
/
v
e
r
c
e
l
/
n
e
x
t
.
j
s
/
d
i
s
c
u
s
s
i
o
n
s
/
3
2
8
9
5
例
え
ば
、
全
部
D
y
n
a
m
i
c
i
m
p
o
r
t
s
に
す
る
と
ど
の
様
な
問
題
が
起
き
る
か
?
開
発
コ
ス
ト
若
干
気
に
す
る
こ
と
が
増
え
る
の
で
、
無
駄
に
d
y
n
a
m
i
c
i
m
p
o
r
t
に
す
る
必
要
は
な
い
対
象
物
を
l
o
a
d
i
n
g
す
る
時
に
待
ち
が
発
生
す
る
で
も
こ
れ
は
初
回
に
待
つ
か
後
で
待
つ
か
の
話
mrsekut
c
h
u
n
k
が
増
え
る
の
で
r
e
q
u
e
s
t
数
が
増
え
る
数
自
体
は
増
え
る
け
ど
、
問
題
と
は
言
え
な
く
な
い
?
mrsekut
問
題
は
時
間
な
の
で
L
C
P
を
悪
化
さ
せ
る
#
?
?
こ
れ
は
た
ぶ
ん
そ
ん
な
こ
と
な
い
と
思
う
他
#
?
?
l
a
z
y
l
o
a
d
i
n
g
で
き
る
こ
と
を
確
認
す
る
対
象
の
c
o
m
p
o
n
e
n
t
に
c
o
n
s
o
l
e
.
l
o
g
を
仕
込
む
と
か
N
e
t
w
o
r
k
パ
ネ
ル
を
見
る
h
t
t
p
s
:
/
/
w
e
b
.
d
e
v
/
c
o
d
e
-
s
p
l
i
t
t
i
n
g
-
w
i
t
h
-
d
y
n
a
m
i
c
-
i
m
p
o
r
t
s
-
i
n
-
n
e
x
t
j
s
/
で
書
い
て
る
#
?
?
ど
の
C
o
m
p
o
n
e
n
t
を
d
y
n
a
m
i
c
i
m
p
o
r
t
す
る
べ
き
な
の
か
非
同
期
的
に
読
み
込
む
C
o
m
p
o
n
e
n
t
つ
ま
り
、
初
期
表
示
に
必
要
の
な
い
C
o
m
p
o
n
e
n
t
例
え
ば
、
大
き
め
の
リ
ス
ト
の
子
な
ど
ク
リ
ッ
ク
し
た
時
に
開
く
m
o
d
a
l
と
か
選
択
さ
れ
て
い
な
い
タ
ブ
の
内
容
と
か
S
S
R
を
回
避
す
る
時
処
理
に
b
r
w
o
s
e
r
の
A
P
I
を
使
用
す
る
場
合
は
e
r
r
o
r
に
な
る
た
め
、
s
e
r
v
e
r
で
は
実
行
さ
れ
な
い
よ
う
に
す
る
わ
か
る
け
ど
、
本
質
的
な
問
題
で
は
な
い
だ
ろ
う
mrsekut
e
t
c
.
v
i
e
w
p
o
r
t
外
の
C
o
m
p
o
n
e
n
t
を
全
部
D
y
n
a
m
i
c
i
m
p
o
r
t
す
る
よ
う
に
す
れ
ば
い
い
ん
じ
ゃ
な
い
の
?
g
o
t
o
d
e
f
i
n
i
t
i
o
n
上
手
く
動
か
な
く
な
る
の
を
ど
う
に
か
で
き
な
い
も
の
か
h
t
t
p
s
:
/
/
v
8
.
d
e
v
/
f
e
a
t
u
r
e
s
/
d
y
n
a
m
i
c
-
i
m
p
o
r
t
Related
Sort by
Related
Modified
Created
Last visited
Most linked
Page rank
Title
Links
next/dynamic
Next.jsで[dynamic import]するライブラリ[docs https://nextjs.org/docs/advanced-features/dynamic-import][example https://github.com/vercel/next.js/blob/canary/examples/with-dynamic-import/pages/index.js]色々なパターンがある
React.lazy
[lazy loading]する[Suspense for Code Splitting]パターンで使用する[docs https://ja.reactjs.org/docs/code-splitting.html#reactlazy]ルーティングのとことかで書くと良い [ref https://ja.reactjs.org/docs/code-splitting.html#route-based-code-splitting]
Dedicated Worker
from [Web Workers]単に「Web Worker」、「Worker」とも言う[Web Workers]の基本形`new Worker(scriptUrl)`で新しいworkerを作り、[Worker Thread]で実行されるブラウザのタブが消えると、このthreadも消える
import()
https://v8.dev/features/dynamic-import[mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import]
WIP
Work In Progress[WIPを明示するためにノートを罫線で分割する]
Networkパネル
from [Chrome DevTools]ネットワークを通じたリソース取得のタイムラインの様子読み込みに時間のかかるリソースの特定をするDisable cacheにチェックを付けてcmd-rすればキャッシュされずにリロード青い線はDOMContentLoadedイベントの発生時点
??
本当に何もわからない[mrsekut.icon]??リンクが付いてるところについて、[Twitter https://twitter.com/mrsekut]とかでリプを送ってもらえると泣いて喜びます
(未解決)styled-componentsをSSGで使うとstyleが崩れることがある
then()という名前の関数をexportしない
from [import()]moduleから[then()]という名前の関数をexportすると、static importか[dynamic import]かで挙動が異なる
動的リンク
実行時に[リンク]される[DLL][/ dynamic link library]https://ja.wikipedia.org/wiki/ダイナミックリンクライブラリ[GPT-4.icon]
Webpackのbundle sizeを小さくする
[Tree Shaking][Dead Code Elimination][Code Splitting][dynamic import][JavaScriptのBuild Size周り]
Code Splitting
初期表示にかかる時間、ユーザが操作できるようになるまでの時間の削減する[Reactのdocs https://ja.reactjs.org/docs/code-splitting.html]初期表示に使っていないJSがどれぐらいあるか計測する[coverageパネル]実現方法
hoistMocksPlugin
[Vitest]内で使わている[static import]を[dynamic import]に変換するやつhttps://github.com/vitest-dev/vitest/blob/12eaf3ea4369c46ab576e371e729a7cad9dfb647/packages/mocker/EXPORTS.md#hoistmocksplugin
Next.js
modalをdynamic importする
modalを[dynamic import]する例えばmodalに対してやる場合はこう書かないと意味ない`const Modal = dynamic(() => import('Modal'));``const Main = () => {``return (`
lazy loading
画像のLazy loading
[lazy loading]>#WIP[Viewport]が近づくと画像をloadするhttps://css-tricks.com/the-complete-guide-to-lazy-loading-images/完全ガイドらしい
Qwik
<img>のloading属性
[lazy loading]するhttps://coliss.com/articles/build-websites/operation/work/native-image-lazy-loading.htmlhttps://qiita.com/hibikikudo/items/853aafe32ad7900712c8https://zenn.dev/ixkaito/articles/deep-dive-into-decoding
Progressive hydration
Dedicated Worker
LocalStorage
セッション情報を保存してはならない [ref https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851]JSで自由にアクセスできるので、使うとしても「公開しても良いもの」のみに使う[Dedicated Worker]では使えない以下の用途のみに使用する要な情報を一切含まない
WorkerDOM
[Dedicated Worker]で動作するDOM API[github https://github.com/ampproject/worker-dom]https://amphtml.wordpress.com/2018/08/21/workerdom/
Off-the-main-thread
https://nhiroki.jp/2018/05/07/off-the-main-thread-api[Dedicated Worker]
Web Workers
[HTML Standard https://html.spec.whatwg.org/multipage/workers.html]参考[https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API Web Workers API - Web API | MDN]>#WIPweb workerはマルチコアのCPUをより効率よく利用できることが多い
react-native-dom
from [React Native][React Native]をブラウザ上で動かすためのライブラリ[react-native-for-web]のためのもの #??[Dedicated Worker]をスレッドとして[Native Bridge]する[github https://github.com/vincentriemer/react-native-dom]
asm.js
React.lazy
Suspense for Code Splitting
[React.Suspense]と[React.lazy]を併用したパターンのことを指すComponentのlazy loading中にfallbackに指定したものを表示する>#WIP[docs https://ja.reactjs.org/docs/react-api.html#reactsuspense]for Code Splitting
Networkパネル
Algolia
gzip
[/ [GNU] [zip]][データ圧縮プログラム]であり、圧縮データのフォーマット60~90%圧縮する[Deflate]で圧縮する計測、確認する
Chrome DevTools
他サイトが何で作られているか見る
[Elementパネル]を見るnext.jsなのか、jqueryなのか、などは割と瞬時で判断が付くclass名を見れば、React系JSX libraryで書いたのか、PHPなどで素のHTMLで書いたのかわかる業務委託をしている場合、`by hoge, inc`のような文言があったりする[Networkパネル]を見る
HAR
[/ HTTP Archive]>HAR(HTTP アーカイブ)は、複数の HTTP セッション ツールでキャプチャ済みデータのエクスポートに使用されるファイル形式です。 この形式は基本的に、特殊なフィールドで構成される JSON オブジェクトです。 [ref https://toolbox.googleapps.com/apps/har_analyzer/]Chromeの場合、[Networkパネル]から保存できる
HTTP Response Header
[Networkパネル]で見れる
Image Size Info
Chromeで一時的にキャッシュさせない
[Networkパネル]の「Disable cache」にチェックを付けておくと、[Chrome DevTools]を開いている間はキャッシュされない
Created
6 years ago
by
mrsekut
Updated
3 years ago
by
mrsekut
Views: 83
Page rank: 20
Copy link
Copy readable link
Start presentation
Hide dots
dynamic import
lazy loading
する
初期表示時に不要なものは最初から読み込まずに、
button押した時など必要になったタイミングで初めてその部分のchunkがfetchされる
使う
next/dynamic
import()
Dedicated Worker
別スレッドでDynamic importsする
ref
Webpack
https://webpack.js.org/guides/code-splitting/#dynamic-imports
React.lazy
ECMAScriptにもある
https://github.com/tc39/proposal-dynamic-import
https://numb86-tech.hatenablog.com/entry/2020/01/04/131626
#WIP
デメリット
https://www.quora.com/What-are-the-cons-of-dynamic-imports-a-k-a-code-splitting-JavaScript-files
https://github.com/vercel/next.js/discussions/32895
例えば、全部Dynamic importsにするとどの様な問題が起きるか?
開発コスト
若干気にすることが増えるので、無駄にdynamic importにする必要はない
対象物をloadingする時に待ちが発生する
でもこれは初回に待つか後で待つかの話
mrsekut.icon
chunkが増えるのでrequest数が増える
数自体は増えるけど、問題とは言えなくない?
mrsekut.icon
問題は時間なので
LCPを悪化させる
#??
これはたぶんそんなことないと思う
他
#??
lazy loadingできることを確認する
対象のcomponentにconsole.logを仕込むとか
Networkパネル
を見る
https://web.dev/code-splitting-with-dynamic-imports-in-nextjs/
で書いてる
#??
どのComponentをdynamic importするべきなのか
非同期的に読み込むComponent
つまり、初期表示に必要のないComponent
例えば、大きめのリストの子など
クリックした時に開くmodalとか
選択されていないタブの内容とか
SSRを回避する時
処理にbrwoserのAPIを使用する場合はerrorになるため、serverでは実行されないようにする
わかるけど、本質的な問題ではないだろう
mrsekut.icon
etc.
viewport外のComponentを全部Dynamic importするようにすればいいんじゃないの?
go to definition上手く動かなくなるのをどうにかできないものか
https://v8.dev/features/dynamic-import